<template>
  <div class="demo">
    <Popconfirm
      title="Are you sure delete this task?"
      :visible="visible"
      ok-text="Yes"
      cancel-text="No"
      @visible-change="handleVisibleChange"
      @confirm="confirm"
      @cancel="cancel"
    >
      <a href="#">Delete a task</a>
    </Popconfirm>
    <br />
    <br />
    Whether directly execute：
    <Checkbox v-model:checked="condition" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Message from '@sscd/message';
  import Checkbox from '@sscd/checkbox';
  import Popconfirm from '@sscd/popconfirm';
  const visible = ref<boolean>(false);
  const condition = ref<boolean>(true);
  const confirm = () => {
    visible.value = false;
    Message.success('Next step.');
  };
  const cancel = () => {
    visible.value = false;
    Message.error('Click on cancel.');
  };
  const handleVisibleChange = (bool: boolean) => {
    if (!bool) {
      visible.value = false;
      return;
    }
    // Determining condition before show the popconfirm.
    console.log(condition.value);
    if (condition.value) {
      confirm(); // next step
    } else {
      visible.value = true;
    }
  };
</script>
